<template>
	<view>
		<view>
			<!-- <view class="back">最新的MV</view> -->
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			<view class="recommend_mv" v-if="curNow == 0">
				<navigator :url="'/pages/user/playMv?id='+item.id"
					v-for="(item, index) in newMvList" :key="index" class="recommend_mv_item">
					<view class="img">
						<view class="position_mv"><text class="back_color">{{item.playCount}}</text></view>
						<image :src="item.image"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view v-for="(value,num) in item.singer" :key="num" class="typesett">
						{{value}}<text v-if="item.singer.length != num+1">/</text>
					</view>
				</navigator>
			</view>
			<view class="" v-if="curNow == 1">
				<view class="">
					<navigator :url="'/pages/user/playMv?id='+item.mvid"
					v-for="(item, index) in topMvList" :key="index" class="">
						<u-row>
							<u-col span="1">
								<view :class="(index < 3)?'rem_mv red':'rem_mv'">{{item.id}}</view>
							</u-col>
							<u-col span="5">
								<view class="img ">
									<view class="position"><text class="back_color">热度：{{item.score}}</text></view>
									<image :src="item.image" class=""></image>
								</view>
							</u-col>
							<u-col span="6">
								<view class="">
									<view class="name text_is_beyond">{{item.name}}</view>
									<view v-for="(value,num) in item.singer" :key="num" class="typesett text_is_beyond">
										{{value}}<text v-if="item.singer.length != num+1">/</text>
									</view>
								</view>
							</u-col>
						</u-row>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '最新MV'
					},
					{
						name: 'MV排行榜'
					}
				],
				curNow: 0,
				newMvLimit: 6,
				newMvList: [], //最新mv
				listMv:10,
				topMvList:[]	//排行榜
			}
		},
		onLoad() {
			uni.request({
				url: "https://www.codeman.ink/api/mv/first",
				data: {
					limit: this.newMvLimit
				},
				method: 'GET',
				success: (res) => {
					// console.log(res.data.data);
					res.data.data.forEach((value, index) => {
						let newMV = {};
						newMV.id = value.id;
						newMV.name = value.name;
						newMV.image = value.cover;
						newMV.playCount = value.playCount;
						newMV.playCount = value.playCount;
						if(newMV.playCount > 10000){
							newMV.playCount = parseInt(newMV.playCount/10000) + "万";
						}
						newMV.singer = [];
						value.artists.forEach((item, num) => {
							newMV.singer.push(item.name);
						})
						this.newMvList.push(newMV);
					})
					// console.log(this.newMvList);

				}
			})
			//mv排行榜
			uni.request({
				url:"https://www.codeman.ink/api/top/mv",
				data:{
					limit:this.listMv
				},
				method: 'GET',
				success: (res) => {
					// console.log(res.data.data);
					res.data.data.forEach((value,index) => {
						let top = {};
						top.id = index + 1;
						top.mvid = value.id;
						top.name = value.name;
						top.image = value.cover;
						top.singer = [];
						value.artists.forEach((item,num) => {
							top.singer.push(item.name);
						});
						top.score = value.score;
						this.topMvList.push(top);
					})
					console.log(this.topMvList);
				}
			})
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		}
	}
</script>

<style>
	.back {
		font-size: 35rpx;
		text-indent: 30rpx;
		color: #C62F2F;
		font-weight: bold;
	}

	.img image {
		height: 240rpx;
		width: 300rpx;
		border-radius: 15rpx;
	}

	.typesett {
		font-size: 22rpx;
		display: inline-block;
		color: #7d7d94;
	}

	.name {
		color: #333333;
	}

	.recommend_mv {
		margin: 10rpx auto;
	}

	.recommend_mv_item {
		display: inline-block;
		width: 40%;
		border-radius: 15rpx;
		margin: 10rpx 30rpx;
	}
	.rem_mv{
		font-size: 45rpx;
		text-align: center;
		color: #888888;
	}
	.red{
		color:#C62F2F;
	}
	.position{
		color: #FFFFFF;
		position: relative;
		top: 40rpx;
		left: 110rpx;
		z-index: 99;
	}
	.position_mv{
		color: #FFFFFF;
		position: relative;
		top: 40rpx;
		left: 220rpx;
		z-index: 99;
	}
	.back_color{
		background: rgba(114,120,126,0.3);
		border-radius: 10rpx;
		padding: 0 5rpx;
	}
</style>
